<template>
  <div>
        <div class="imgWrap">
          <img src="../../static/img/1.jpg" alt="">
        </div>
        <group class="operation">
            <x-input class="phone" type="tel" placeholder="请输入手机号" ref="phone" v-model="phone" @on-change="phoneChange" is-type="china-mobile" required>
                <img slot="label" src="../../static/img/shouji.png">
            </x-input>
             <x-input class="password" type="password" placeholder="请输入密码" ref="password" @on-change="passwordChange" v-model="password" required :min="6">
                <img slot="label" src="../../static/img/suo.png">
            </x-input>
            <x-button type="primary" :disabled="btnFlag" action-type="submit" class="login" @click.native="sub">登录</x-button>
        </group>
  </div>
</template>
<script>
    import Utils from '*/js/modules/utils'
    import {Group,Cell,XInput,XButton} from 'vux'
    export default{
        data(){
            return{
                phone:'',
                password:'',
                phoneValid:false,
                passwordValid:false,
                flag:true
            }
        },
        mounted(){

        },
        computed:{
            btnFlag(){
                return this.flag=this.phoneValid && this.passwordValid?false:true
            }
        },
        components:{
            Group,Cell,XInput,XButton
        },
        methods:{
            sub(){
                 this.$router.push({path:'workProject'})
                // if(this.phone.trim()==''){
                //     this.$vux.toast.text('请输入手机号');
                // }else if(!/^(0|86|17951)?(13[0-9]|14[0-9]|15[012356789]|16[0-9]|17[0-9]|18[0-9]|19[0-9]|)[0-9]{8}$/.test(this.phone)){
                //     this.$vux.toast.text('手机号不正确');
                // }else if(this.password.trim()==''){
                //     this.$vux.toast.text('请输入密码');
                // }else if(this.password.trim().length<6){
                //     this.$vux.toast.text('密码至少6位');
                // }else{
                //     this.$router.push({path:'workProject'})
                // }
            },
            phoneChange(){
                this.phoneValid=this.$refs.phone.valid;
                console.log(this.phoneValid);
            },
            passwordChange(){
                this.passwordValid=this.$refs.password.valid;
                 console.log(this.passwordValid);
            },
        }
    }
</script>
<style>
    .phone input,.password input{
        margin:0;
        padding:0;
        border:0;
        height:auto;
        font:14px/24px "microsoft yahei";
    }
    body .weui-cells:before,body .weui-cells:after{
        border-top:none;
        height:0;
        border-bottom:none;
    }
    body .weui-cell:before{
        border-top:none;
        height:0;
    }
    .phone img,.password img{
        width:20px;
        height:20px;
        display: block;
        margin-right:10px;
    }
    body .weui-btn_disabled.weui-btn_primary{
        background-color: #eee;
    }
</style>
<style scoped>
    .login{
        background:#2c8481;
        font:14px/48px "microsoft yahei";
        border-radius:24px;
    }
    .phone,.password{
        border:solid 1px #eee;
        border-radius:24px;
        margin-bottom:20px;
    } 
    .operation{
        padding:0 10%;
    }
    .imgWrap img{
        width:100%;
        display: 100%;
        display: block;
    }
</style>
